<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="130px">
            <el-row :gutter="20" style="margin-top:10px">
                <el-col :span="6">
                    <el-form-item label="项目组" >
                        <el-select v-model="queryParams.projectId"  style="width: 100%" filterable>
                            <el-option  v-for="item in projectList"  placeholder="请选择" style="width: 100%" :key="item.projectId" :label="item.projectName" :value="item.projectId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="合同名称" >
                        <el-input v-model="queryParams.name" placeholder="请输入合同名称"   clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="合同编码" >
                        <el-input v-model="queryParams.code" placeholder="请输入合同编码"   clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="订单名称" >
                        <el-input v-model="queryParams.orderName" placeholder="请输入订单名称"   clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="订单编码" >
                        <el-input v-model="queryParams.orderCode" placeholder="请输入订单编码"   clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="履约服务日期" >
                        <el-date-picker
                            v-model="serviceDate"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions" value-format="yyyy-MM-dd" clearable>
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="24">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleImport" style="float:right">导入订单信息</el-button>
            </el-col>

        </el-row>
        <el-table  v-loading="loading" :data="dataList" :height="tabHeight"  size="mini"
        element-loading-text="加载中..." element-loading-background="rgba(255, 255, 255, 0.5)" 
        stripe tooltip-effect="dark" class="myTable" border fit highlight-current-row >
            <el-table-column type="index" label="序号" width="50" align="center" fixed="left"/>
            <el-table-column label="项目组" align="left" header-align="center" key="projectName" prop="projectName"  width="150" fixed="left"/>
            <el-table-column label="状态" align="center" prop="status" width="80" fixed="left">
                <template slot-scope="scope">
                    <el-tag type="info" v-if="scope.row.status == 0" size="mini">未开始</el-tag>
                    <el-tag type="primary" v-else-if="scope.row.status == 1" size="mini">进行中</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.status == 2" size="mini">已结束</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="合同信息" align="center">
                <el-table-column label="合同名称" align="center" key="name" prop="name" width="100"/>
                <el-table-column label="合同编码" align="center" key="code" prop="code" width="160"/>
                <el-table-column label="使用部门" align="center" key="dep" prop="dep" width="140"/>
                <el-table-column label="履约服务开始日期" align="center" key="serviceStartTime" prop="serviceStartTime" width="120"/>
                <el-table-column label="履约服务结束日期" align="center" key="serviceEndTime" prop="serviceEndTime" width="120"/>
                <el-table-column label="合同总金额" align="center" key="money" prop="money" width="100">
                    <template slot-scope="scope">
                        {{  Number(scope.row.money / 10000).toFixed(2) }}万元
                    </template>
                </el-table-column>
                <el-table-column label="合同总工作量" align="center" key="workload" prop="workload" width="100">
                    <template slot-scope="scope">
                            {{  Number(scope.row.workload ) }}天
                        </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="订单信息" align="center">
                <el-table-column label="订单编码" align="center" key="orderCode" prop="orderCode" width="160"/>
                <el-table-column label="订单名称" align="center" key="orderName" prop="orderName" width="240" :show-overflow-tooltip="true"/>
                <el-table-column label="订单服务期" align="center" key="orderServiceTerm" prop="orderServiceTerm" width="90">
                    <template slot-scope="scope">
                            {{  Number(scope.row.orderServiceTerm ) }}年
                        </template>
                </el-table-column>
				<el-table-column label="订单折扣" align="center" key="orderDiscount" prop="orderDiscount" width="80"/>
                <el-table-column label="订单工作量数量" align="center" key="orderWorkload" prop="orderWorkload" width="120"/>
                <el-table-column label="订单总金额" align="center" key="orderMoney" prop="orderMoney" width="100"/>
                <el-table-column label="预算信息" align="left" header-align="center" key="budget" prop="budget" min-width="250" :show-overflow-tooltip="true"/>
            </el-table-column>
           
        </el-table>
        <!--<el-pagination v-show="total>0"  background @size-change="getList" @current-change="getList" :current-page.sync="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.pageSize" layout=" total, sizes, prev, pager, next, jumper" :total="total" style="float:right">
        </el-pagination>-->
        <importInfo ref="importInfo" :projectList="projectList" @submitForm="submitForm"/> 
    </div>
  </template>
  <script>
  import Mock from "mockjs";
  import axios from 'axios'
  import importInfo from './importInfo'
  import '@/mock/mock.js'
  export default {
    name: "infoLibrary",
    components: {
        importInfo
    },
    data() {
      return {
        projectList:[],
        // 按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格数据
        allList: [],
        // 表格数据
        dataList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 履约服务日期
        serviceDate:'',
        // 查询参数
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            orderByColumn:'createTime',
            isAsc:'desc',
            projectId:'',
            name:'',
            code:'',
            orderName:'',
            orderCode:'',
            startTime:'',
            endTime:''
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        //表格高度
        tabHeight: '500px',
      };
    },
    watch: {
        'serviceDate': {
            handler(newStr, oldStr) {
                if(newStr && newStr.length){
                    this.queryParams.startTime = newStr[0]
                    this.queryParams.endTime = newStr[1]
                }else{
                    this.queryParams.startTime = ""
                    this.queryParams.endTime = ""
                }

            }
        },
    },
    created() {
     
        let pList = JSON.parse(window.sessionStorage.getItem('infoLibrary-project')) 
        if(pList){
            this.projectList = pList
            this.getList()
        }else{
            let arr = []
            axios.get( window.location.host+'/getProjects').then(res => {
               // console.log(res)
                this.projectList = res.data.data
                window.sessionStorage.setItem('infoLibrary-project',JSON.stringify(this.projectList))
                this.getList()
            })
        }
       
       
     },
    mounted() {
        this.$nextTick(() => {
            this.setTabHeight()
        })
        window.onresize = () => {
            return (() => {
                this.$nextTick(() => {
                    this.setTabHeight()
                })
            })()
        }
    },
    methods: {
        submitForm(data){
            //console.log(data)
            axios.post( window.location.host+'/info/library/add',{
                data: data,
            }).then(res => {
               
                var dList = JSON.parse(window.sessionStorage.getItem('infoLibrary-list')) 
                let list = dList.concat(res.data.data)
                window.sessionStorage.setItem('infoLibrary-list',JSON.stringify(list))
                this.getList()
                
            })
        },
        handleImport(){
            this.$refs.importInfo.initImport()
          
        },
        getList() {
            this.loading = true;
            var dList = JSON.parse(window.sessionStorage.getItem('infoLibrary-list')) 
            if(dList){
                this.allList = dList
                this.handleQuery()
            }else{
                
                axios.post( window.location.host+'/info/library/list',{
                    data: this.projectList,
                    pageSize: 100,
                }).then(res => {
                 //   console.log(res)
                    this.allList  = res.data.data
                    window.sessionStorage.setItem('infoLibrary-list',JSON.stringify(this.allList))
                    this.handleQuery()
                })
            }
          
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.loading = true;
            this.queryParams.pageNum = 1;
            setTimeout(()=>{
           
                if( !this.queryParams.projectId && !this.queryParams.name && !this.queryParams.code 
                && !this.queryParams.orderName && !this.queryParams.orderCode&& !this.queryParams.startTime && !this.queryParams.endTime){
                    this.dataList = JSON.parse(JSON.stringify(this.allList)) 
                }else{
                    let arr = this.allList.filter((v)=>{
                        return v.projectId.indexOf(this.queryParams.projectId)>-1 && v.name.indexOf(this.queryParams.name)>-1 && v.code.indexOf(this.queryParams.code)>-1 
                        && v.orderName.indexOf(this.queryParams.orderName)>-1 && v.orderCode.indexOf(this.queryParams.orderCode)>-1 && v.name.indexOf(this.queryParams.name)>-1 
                    })
                  
                    if(!this.queryParams.startTime && !this.queryParams.endTime){
                        this.dataList = arr
                    }else{
                        let newArr = arr.filter((v)=>{
                            return this.queryParams.startTime > v.serviceStartTime && this.queryParams.endTime <  v.serviceEndTime
                        })
                        this.dataList = newArr
                    }
                }
                this.loading = false
            },800)
            
           // this.getList();
          
        },
        resetQuery(){
            this.serviceDate = null
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                orderByColumn:'createTime',
                isAsc:'desc',
                projectId:'',
                name:'',
                code:'',
                orderName:'',
                orderCode:'',
                startTime:'',
                endTime:''
            } 
            this.handleQuery();
        },
        setTabHeight() {
            var clientHeight = 0;
            if (document.body.clientHeight && document.documentElement.clientHeight) {
                clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
            } else {
                clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
            }
           // console.log( this.$refs.queryForm)
            this.tabHeight = ((clientHeight ? clientHeight : 900) - this.$refs.queryForm.$el.clientHeight - 90 - 130) + 'px'

        },
    }
  }
  </script>
  <style scoped lang="scss">
 .myTable ::v-deep .el-table__header  tr th {
        padding:0  !important;
        height: 20px !important;
    }
  </style>